$(function() {
    // 定义一个全局变量，将来用于操作get参数
    let q = {
        pagenum: 1, //      是	int	    页码值
        pagesize: 2, //	   是	int	    每页显示多少条数据
        cate_id: "", //      否	string	文章分类的 Id
        state: "", //      否	string	文章的状态，可选值有：已发布、草稿
    }

    // 需求1: 渲染文章列表数据; - 将来要用，所以封装成函数！
    let layer = layui.layer;
    initArticleList();
    // 封装
    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            // get参数，且为查询参数用 params
            params: q
        }).then((res) => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 循环遍历，赋值
            let arr = [];
            res.data.data.forEach(ele => {
                    arr.push(`
                    <tr>
                        <td>
                            <a data-id="${ ele.Id}" href="javascript:;" class="link-detail">${ele.title}</a>
                        </td>
                        <td>${ ele.cate_name}</td>
                        <td>${ dateFormat(ele.pub_date)}</td>
                        <td>${ ele.state}</td>
                        <td>
                            <a href="/article/art_edit.html?id=${ ele.Id}" class="layui-btn layui-btn-xs">修改</a>
                            <button data-id="${ ele.Id}" class="btn-del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `);
                })
                // 赋值渲染
            $("tbody").empty().html(arr.join(''));
            // 渲染完毕文章列表后，渲染分页
            renderPage(res.data.total);
        });
    }

    // 需求2: 初始化渲染文章分类列表;
    let form = layui.form;
    initArtCateList();
    // 封装初始化文章分类列表渲染函数
    function initArtCateList() {
        // 发送ajax
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then((res) => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 定义数组，直接渲染
            let arr = ['<option value="">请选择文章类别</option>'];
            res.data.data.forEach(ele => {
                if (ele.Id > 0) {
                    arr.push(`<option value="${ele.Id}">${ele.name}</option>`);
                }
            });
            // 赋值
            let str = arr.join('');
            $("[name=cate_id]").empty().html(str);
            // 重新渲染页面中的所有 form 中的 所有表单( select / checkbox / radio )
            form.render();
        });
    }

    // 需求3: 筛选
    $("#searchForm").on('submit', function(e) {
            // 阻止默认提交
            e.preventDefault();
            // 修改参数
            q.cate_id = $('[name="cate_id"]').val();
            q.state = $('[name="state"]').val();;
            // 发送ajax重新渲染文章列表
            initArticleList();
        })
        // $("#searchForm").on('reset', function (e) {
        //     // 阻止默认提交
        //     e.preventDefault();
        //     $('[name="cate_id"]').val('');
        //     $('[name="state"]').val('');
        //     // 修改参数
        //     q.cate_id = ''
        //     q.state = ''
        //     // 发送ajax重新渲染文章列表
        //     initArticleList();
        // })

    // 需求4: 分页;
    function renderPage(total) {
        let laypage = layui.laypage;
        laypage.render({
            elem: 'pageBox', // 注意，这里的 test1 是 ID，不用加 # 号
            count: total, // 数据总数，从服务端得到
            limit: q.pagesize, // 每页显示的条数
            curr: q.pagenum, // curr就是当前页 
            // layout 元素配置
            layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
            // 每页条数的选择项
            limits: [2, 5, 10, 15, 20],
            // 页码切换后的回调函数！
            jump: function(obj, first) {
                // // obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                // 首次不执行
                if (!first) {
                    // 改变参数，重新发送ajax，
                    q.pagenum = obj.curr; // 修改当前页
                    // 每页显示多少改变，要同步给参数
                    q.pagesize = obj.limit;
                    // 渲染文章列表！
                    initArticleList();
                }
            }
        });
    }

    // 需求5: 删除文章分类 - 事件委托
    $('tbody').on('click', '.btn-del', function() {
        let id = $(this).attr('data-id');
        // 弹出层 - 询问框
        layer.confirm('是否确认删除文章?', {
            icon: 3,
            title: '提示'
        }, function(index) {
            // 发送ajax，删除文章
            axios({
                method: 'GET',
                // 路由参数， /保留  :删除   id换成动态值
                url: '/my/article/delete/' + id
            }).then(res => {
                // 判断状态
                if (res.data.status != 0) {
                    return layer.msg(res.data.message);
                }
                // 成功提示
                layer.msg('恭喜您，删除文章成功！');
                // ajax删除最后一条数据成功，页面中还有一条数据(就是ajax删除那一条)
                //  判断页面中是否还有一条数据，如果有 q.pagenum--
                //  当前页不是第一页，才有资格--
                if ($(".btn-del").length == 1 && q.pagenum >= 2) {
                    q.pagenum--;
                }
                // // 优化
                // $(".btn-del").length == 1 && q.pagenum >= 2 && q.pagenum--;

                // 重新渲染页面中的文章列表;
                initArticleList();
            });
            layer.close(index);
        });
    })

    // 需求6：展示文章信息
    $("tbody").on('click', '.link-detail', function() {
        let id = $(this).attr('data-id');
        axios({
            method: 'GET',
            url: '/my/article/' + id
        }).then(res => {
            if (res.data.status != 0) {
                return layer.msg(res.data.message);
            }
            // 先发送ajax, 在展示弹出层
            layer.open({
                type: 1,
                title: '预览文章',
                area: ['980px', '470px'],
                content: `
                    <h1>${res.data.data.title}</h1>
                    <div>作者：123 发布时间：2021-12-20 09:10:40 所属分类：最新 状态：已发布</div>
                    <hr>
                    <img src="">
                    <div>${res.data.data.content}</div>
                `
            })
        })
    })
});